<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>数据挖掘-模型管理</title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <script type="text/javascript" src="../js/datamining.js"></script>
</head>
<body class="body">
<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add" onclick="addmodel()">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
    <span class="fr">
        <span class="layui-form-label">搜索条件：</span>
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input">
        </div>
        <button class="layui-btn mgl-20">查询</button>
    </span>
</div>

<!-- 表格 -->
<table id="dateTable" lay-filter="dataCheck"></table>

<!-- 实例详情 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>实例详情</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">实例信息</li>
        <li>输入输出</li>
        <li>启动实例</li>
        <li>本实例分析结果</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <ul style="line-height: 2rem;" id="showItem">
            </ul>
        </div>
        <div class="layui-tab-item">
            <ul>
                <li style="float: left;width: 50%">输入组：
                    <table class="layui-table" style="width: 80%">
                        <thead>
                        <tr><th>device_id</th><th>type</th></tr></thead>
                        <tbody><tr><td>1</td><td>tmp</td></tr>
                        <tr><td>2</td><td>hum</td></tr></tbody>
                    </table>
                </li>
                <li style="float: left;width: 50%">输出：暂无输出</li>
            </ul>
        </div>
        <div class="layui-tab-item">指定运行时间：
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input type="text" class="layui-input" id="run_timeout">
            </div>
            <a class="layui-btn btn-add btn-default" id="startapp" onclick="layer.msg('模型已启动...');">启动</a>
        </div>
        <div class="layui-tab-item">学习信息：暂无学习信息</div>
    </div>
</div>


<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">

    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table','laydate'], function () {

        // 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            ,laydate = layui.laydate
            , $ = layui.jquery;

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: 250    //容器高度
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'name', title: '实例名称', width: 250}
                , {field: 'id', title: '实例ID', width: 150}
                , {field: 'model', title: '模型名称', width: 150}
                , {field: 'stop_time', title: '上次停止运行时间', width: 300}
                , {fixed: 'right', title: '操作', width: 400, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            //, id: 'dataCheck'
            //, url: './../json/data_table.json'
            ,data:[{"name":"app_1","id":1,"model":"test1","stop_time":20180721},{"name":"app_2","id":2,"model":"test2","stop_time":20180720}]
            , method: 'get'
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: false
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        // 获取选中行
        table.on('checkbox(dataCheck)', function (obj) {
            layer.msg('已选中该行');
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        //toolbar事件监听
        table.on('tool(dataCheck)',function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                var innerhtml='<li>实例名称：'+data.name+'</li><li>实例ID：'+data.id+'</li><li>模型名称：'+data.model+'</li>'

                console.log(data)
                $('#showItem').empty()
                $('#showItem').append(innerhtml)
            }
        });

        // 刷新
        $('#btn-refresh').on('click', function () {
            tableIns.reload();
        });


        //日历
        laydate.render({
            elem: '#run_timeout' //指定元素
            ,range:true
        });
    });
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>